<template>
  <div style="display: grid">
    <template v-if="dataSource && dataSource.length">
      <template v-for="(item, index) of dataSource">
        <slot v-if="item && item.slot" :name="item.slot" :scope="item" :index="index"></slot>
        <slot v-else :scope="item" :index="index"></slot>
      </template>
    </template>
  </div>
</template>

<script>
export default {
  name: 'grid-box',
  props: {
    dataSource: { type: Array, default: undefined },
  },
};
</script>

<style scoped></style>
